#state_ChangelogState {
  .content {
    @include S(max-width, 800px);
    display: flex;
    flex-direction: column;
    @include S(padding-top, 20px);
  }
  .entry {
    padding: 10px 20px;
    .version {
      @include Heading;
      @include S(padding-left, 10px);
    }
    .date {
      @include PlainText;
      &::before {
        content: " | ";
      }
      color: #aaabaf;
    }

    .changes {
      @include PlainText;
      @include S(padding-left, 30px);
      strong {
        background: $colorBlueBright;
        font-weight: bold;
        color: white;
        text-transform: uppercase;
        border-radius: 5px;
        @include S(padding, 1px, 4px);
        @include S(margin-right, 3px);
      }
    }
  }
  
  [data-changelog-skin="test"]{
    background: #f8f8f8;
    padding: 20px !important;
    @include S(margin, 15px);
    
    @include DarkThemeOverride{
      background: rgba(0, 10, 20, .2);
    }

    @include S(border-radius, 5px);
    &::before{
      content: '';
      width: 100%;
      display: block;
      // background: ;
      @include S(height, 80px);
      @include S(border-radius, 5px);
      @include S(margin-bottom, 5px);
    }
  }
}